<template>
  <div class="login">
    <div class="title">
      <el-icon class="back" @click="back"><Back /></el-icon>
      <h1  style="background-color: rgba(107,146,200,0.66);text-align: center">登录</h1>
    </div>
    <el-form :model="loginForm" label-width="80px" class="login-form">
      <el-form-item label="账号">
        <el-input v-model="loginForm.account"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input type="password" v-model="loginForm.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleLogin" style="width:100px">登录</el-button>
        <el-button type="primary" @click="clean" style="width:100px;">清除</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup name="">
import emitter from "@/utils/mitt.ts";
import {Back} from "@element-plus/icons-vue"
import {ElMessage} from "element-plus";
import {ref} from "vue";
import {userstore} from "@/store/userStore.ts";
let user = userstore()
let loginForm = ref({
  account: "",
  password: ""
})
function clean() {
  loginForm.value = {
    account: "",
    password: ""
  }
}
function handleLogin() {
  if (user.user===loginForm.value.account && user.pwd===loginForm.value.password){
    ElMessage({
      message: '登录成功',
      type: 'success'
    })
    emitter.emit("back",true)
    emitter.emit("login",false)
  }
  else {
    ElMessage({
      message: '账号或密码错误!',
      type: 'error'
    })
  }
}
function back(){
  emitter.emit("back",true)
}

</script>

<style scoped>
.login-form {
  width: 300px;
  margin-left: 20px;
  margin-top: 50px;
}
h1{
  margin-top: -50px;
  color: white;
}
.back{
  font-size: 35px;
  margin-top: 5px;
}

</style>